<template>
  <a-spin :spinning="confirmLoading" style="background: #fff">
    <j-form-container :disabled="false">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-collapse v-model="activeKey">
          <!-- 基本信息 -->
          <a-collapse-panel key="1" header="基本信息">
        <a-row :gutter="48">
          <a-col :span="8" :hidden="true">
            <a-form-model-item label="标题" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="bpmBizTitle">
              <a-input placeholder="请输入标题" :disabled="formDisabled" v-model="model.bpmBizTitle"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="单据编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="billNo">
              <a-input :disabled=formDisabled v-model="model.billNo" placeholder="请输入单据编号" disabled></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="申请人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="proposer">
                  <!-- <select-person-input :disabled="formDisabled" v-model="model.proposer" disabled /> -->
              <select-user-by-dep   :multi="false" v-model="model.proposer" disabled></select-user-by-dep>
                  <!-- :disabled=formDisabled -->
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="申请日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="createTime">
              <a-input v-model="model.createTime" placeholder="请选择填报日期" disabled ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="申请部门" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="proposerDeptId">
                  <j-select-depart :disabled="formDisabled" v-model="model.proposerDeptId" disabled />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="申请公司" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="companyId">
              <select-Company-input placeholder="请选择申请公司" :disabled="formDisabled" v-model="model.companyId"/>
            </a-form-model-item>
          </a-col>
<!--          迭代13：提现申请单：隐藏新增、编辑、详情、列表页面所属团队、是否跨团队两个字段，新增一个申请公司，必填，公司档案弹框，单选-->
<!--          <a-col :span="8">-->
<!--            <a-form-model-item label="所属团队" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="teamId">-->
<!--                  <select-team-input-->
<!--                  :disabled=formDisabled-->
<!--                  v-model="model.teamId" :tdlx="3"/>-->
<!--            </a-form-model-item>-->
<!--          </a-col>-->
<!--          <a-col :span="8">-->
<!--            <a-form-model-item label="是否跨团队" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="crossTeam">-->
<!--              <j-dict-select-tag :disabled=formDisabled v-model="model.crossTeam" dictCode="is_cross_team" placeholder="请选择是否跨团队" />-->
<!--            </a-form-model-item>-->
<!--          </a-col>-->
          <a-col :span="8">
            <a-form-model-item label="提现金额（元）" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="amount">
              <a-input-number :disabled=formDisabled :max="99999999" :min="0"  v-model.number="model.amount" placeholder="请输入提现金额" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          
          <a-col :span="24">
            <a-form-model-item label="申请事由" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="cause">
              <!-- <a-input :disabled=formDisabled v-model="model.cause" placeholder="请输入申请事由"  ></a-input> -->
               <a-textarea :disabled="formDisabled" :max-length="20" v-model="model.cause" rows="2" placeholder="请输入事由"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
              <!-- <a-input :disabled=formDisabled v-model="model.remark" placeholder="请输入备注"  ></a-input> -->
               <a-textarea :disabled="formDisabled" :max-length="500" v-model="model.remark" rows="4" placeholder="请输入备注"/>
            </a-form-model-item>
          </a-col>
        </a-row>
        </a-collapse-panel>
        <a-collapse-panel key="2" header="附件信息">
            <a-row :gutter="48">
              <a-col :span="24">
                <a-form-model-item prop="attachments">
                  <j-upload  :disabled="formDisabled" v-model="model.attachments"></j-upload>
                  <!-- <a-button v-else icon="download" @click="viewFile(model.attachments)">文件列表</a-button> -->
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-collapse-panel>
        </a-collapse>
      </a-form-model>
      <common-flow-list v-if="formBpm && model.bpmStatus !== '1'" :formData="formData" style="margin-top: 10px"></common-flow-list>
      <!-- <view-file-modal ref="viewFileModal"></view-file-modal> -->
    </j-form-container>
    <a-row :gutter="48" v-if="formBpm">
      <a-col :span="24" style="text-align: center;margin-top: 15px">
        <a-button type="primary"  @click="onPrint">打印</a-button>
      </a-col>
    </a-row>
    
    <ErpWithdrawMoneyFormPrint v-if="formBpm" class="print_style" id="drawmoneyContent" :formData="model" :formDataHistory="formData"></ErpWithdrawMoneyFormPrint>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'
  import { mapGetters } from 'vuex';
  import moment from 'moment';
  // import { viewFile } from '@/utils/util'
  // import ViewFileModal from '@/views/scy/components/ViewFileModal'
  import SelectPersonInput from '@/views/scy/components/SelectPersonInput'
  import SelectUserByDep from '@/views/scy/components/SelectUserByDep'
  import SelectTeamInput from '@/views/scy/components/SelectTeamInput'
  import SelectCompanyInput from '@/views/scy/components/SelectCompanyInput'
  import CommonFlowList from '@/views/components/CommonFlowList.vue';
  import Print from '@/utils/print/printarea.js';
  import ErpWithdrawMoneyFormPrint from './ErpWithdrawMoneyFormPrint' // 打印
  export default {
    name: 'ErpWithdrawMoneyForm',
    components: {
      SelectPersonInput,
      // ViewFileModal,
      SelectUserByDep,
      SelectTeamInput,
      CommonFlowList,
      SelectCompanyInput,
      ErpWithdrawMoneyFormPrint
    },
    // mixins: [viewFile],
    props: {
      //流程表单data
      formData: {
        type: Object,
        default: ()=>{},
        required: false
      },
      //表单模式：true流程表单 false普通表单
      formBpm: {
        type: Boolean,
        default: false,
        required: false
      },
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{
         },
        labelCol: {
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 24 },
        },
        activeKey: ['1','2','3'],
        confirmLoading: false,
        validatorRules: {
        proposer: [
            { required: true, message: '请输入申请人!',trigger: 'change'},
        ],
        createTime: [
            { required: true, message: '请选择申请日期!',trigger: 'change'},
        ],
        proposerDeptId: [
            { required: true, message: '请输入申请部门!',trigger: 'change'},
        ],
        // teamId: [
        //     { required: true, message: '请选择所属团队!',trigger: 'change'},
        // ],
        companyId: [
            { required: true, message: '请选择申请公司',trigger: 'change'},
        ],
        // crossTeam: [
        //     { required: true, message: '请选择是否跨团队!',trigger: 'change'},
        // ],
        cause: [
            { required: true, message: '请输入申请事由!',trigger: 'blur'},
        ],
        amount: [
            { required: true, message: '请输入提现金额!'},
            { required: true, pattern: /^(([1-9][0-9]*)|([0]\.\d{0,2}|[1-9][0-9]*\.\d{0,2}))$/, message: '请输入正确的提现金额!' },
        ],
        },
        url: {
          add: "/api/erp/finance/withdrawMoney/erpWithdrawMoney/add",
          edit: "/api/erp/finance/withdrawMoney/erpWithdrawMoney/edit",
          queryById: "/api/erp/finance/withdrawMoney/erpWithdrawMoney/queryById",
          gainBillNo: "/api/erp/finance/withdrawMoney/erpWithdrawMoney/getBillNo"
        },
        userName: ''
      }
    },
    computed: {
      formDisabled(){
        if(this.formBpm===true){
          if(this.formData.disabled===false){
            return false
          }
          return true
        }
        return this.disabled
      },
      showFlowSubmitButton(){
        if(this.formBpm===true){
          if(this.formData.disabled===false){
            return true
          }
        }
        return false
      }
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
       //如果是流程中表单，则需要加载流程表单data
      this.showFlowData();
    },
    methods: {
      ...mapGetters(['userInfo']),
      add () {
        this.edit(this.modelDefault);
        // this.model.createBy = this.userInfo().empName;//经办人名称
        // this.model.createTime = moment().format('YYYY-MM-DD HH:mm:ss');
        this.userName = this.userInfo().empName;// 当前登录人名称
        this.model.createTime = moment().format('YYYY-MM-DD HH:mm:ss');
        this.model.proposerDeptId = this.userInfo().deptId; //当前登录人部门
        this.model.proposer = this.userInfo().empId; //获取经办人id
        this.getBillNo();
      },
      backUserInfo(data) {
          // this.model.applyUnit = data[0].orgDepart;//申请人单位
          this.model.applyDept = data[0].departmentId;//申请人部门
      },
      edit (record) {
        this.$refs.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      //生成单据编号
      getBillNo () {
        getAction(this.url.gainBillNo).then((res)=>{
          if(res.success){
            //that.model.billNo = res.result//单据编号
            this.$set(this.model,'billNo',res.result)
            //流程标题添加
            this.$set(this.model,'bpmBizTitle',this.userName + '-' + this.model.billNo);
          }
        })
      },
      //渲染流程表单数据
      showFlowData(){
        if(this.formBpm === true){
          let params = {id:this.formData.dataId};
          getAction(this.url.queryById,params).then((res)=>{
            if(res.success){
              this.edit (res.result);
            }
          });
        }
      },

      submitForm(type) {
        const that = this;
        if (type == 'draft') {
          // 代表保存草稿不做校验
          this.submit(type)
        } else if (type == 'submit') {
          // 触发表单验证
          this.$refs.form.validate(valid => {
            if (valid) {
              that.submit(type)
            } else {
              that.$emit('unButtonDisable')
            }
          })
        } else {
          console.log('传参数，保存：draft，提交：submit')
        }
      },
      submit (type) {
        const that = this;
        that.confirmLoading = true;
        let httpurl = '';
        let method = '';
        if (!this.model.id) {
          httpurl += this.url.add;
          method = 'post';
        } else {
          httpurl += this.url.edit;
          method = 'put';
        }
        httpAction(httpurl, this.model, method).then((res) => {
          if (res.success) {
            that.$message.success(res.message);
            if (method == 'post') {
              that.model.id = res.result;
            }
            that.$emit('ok', type, that.model);
          } else {
            that.$message.warning(res.message);
            that.$emit('unButtonDisable');
          }
        }).catch((error) => {
          that.$emit('unButtonDisable', error);
        }).finally(() => {
          that.confirmLoading = false;
        })
      },

      // 点击打印
      onPrint () {
        let print = new Print({
          el: '#drawmoneyContent',
          popTitle: '提现申请详情 · 禾美环保',
          endCallback() {

          }
        })
      }
    }
  }
</script>
<style>
  @import "../../../../../utils/print.css";
</style>